<template>
  <div class="fission-user table-theme">
    <el-card class="box-card">
      <div class="box-card-view">
        <head-title title="订单--裂变订单"></head-title>
        <div class="active-select">
          选择对应活动，获取数据：
          <el-select
            v-model="activity_id"
            placeholder="选择对应活动，获取数据"
            size="small"
            @change="init(1)"
          >
            <el-option
              v-for="item in activityList"
              :key="item.activity_id"
              :label="item.title"
              :value="item.activity_id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </el-card>

    <DataPanel :list="dataListy"></DataPanel>
    <el-card style="margin-top: 20px">
      <div class="fission-user-menu">
        <div class="fission-user-menu-left"></div>
        <div class="fission-user-menu-right">
        </div>
      </div>
      <div class="fission-order-menu">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="fission-order-select">
              支付状态：
              <el-select
                size="small"
                v-model="pay_status"
                placeholder="请选择"
                @change="init(page)"
              >
                <el-option
                  v-for="item in payOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="fission-order-select">
              核销状态：
              <el-select
                style="margin-top: 10px"
                size="small"
                v-model="order_status"
                placeholder="请选择"
                @change="init(page)"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="7">
            <div class="fission-order-select">
              核销时间：
              <el-date-picker
                @change="selectTime"
                v-model="selectModel.time"
                type="daterange"
                align="right"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="onDerive">导出</el-button>
          </el-col>
          <el-col :span="9">
            <div style="display: flex; justify-content: flex-end">
              <search-view
                :option="optionList"
                @value="goSearch"
                @clear="refreshPage"
              ></search-view>
            </div>
            <div style="display: flex; justify-content: flex-end">
              <refresh-button @refresh="refreshPage"></refresh-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <p style="text-align: right; line-height: 30px">总数据数：{{ total }}</p>
      <el-table :data="fissionList">
        <el-table-column
          label="活动ID"
          align="center"
          prop="activity_id"
        ></el-table-column>
        <el-table-column
          label="用户ID"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          prop="nickname"
        ></el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.heard_img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="电话"
          align="center"
          prop="phone"
        ></el-table-column>
        <el-table-column
          label="申请人"
          align="center"
          prop="accept_name"
          v-if="is_sign == 1"
        ></el-table-column>
        <el-table-column
          label="申请人电话"
          align="center"
          prop="mobile_phone"
          v-if="is_sign == 1"
        ></el-table-column>
        <el-table-column
          label="申请人公司名称"
          align="center"
          prop="company"
          v-if="is_sign == 1"
        ></el-table-column>
        <el-table-column
          label="邮箱"
          align="center"
          prop="email"
        ></el-table-column>
        <el-table-column
          label="订单ID"
          align="center"
          prop="order_id"
        ></el-table-column>
        <el-table-column
          label="订单金额"
          align="center"
          prop="order_amount"
        ></el-table-column>
        <el-table-column
          label="支付状态"
          align="center"
          prop="pay_status_name"
        ></el-table-column>
        <el-table-column
          label="核销状态"
          align="center"
          prop="order_status_name"
        ></el-table-column>
        <el-table-column
          label="直接上级ID"
          align="center"
          prop="first_parent_id"
        ></el-table-column>
        <el-table-column
          label="直接上级"
          align="center"
          prop="first_parent_nickname"
        ></el-table-column>
        <el-table-column label="直接上级" align="center">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.first_parent_heard_img"></ImgPopover>
          </template>
        </el-table-column>

        <el-table-column
          label="一级返现"
          align="center"
          prop="first_parent_amount"
        ></el-table-column>
        <el-table-column
          label="间接上级ID"
          align="center"
          prop="second_parent_id"
        ></el-table-column>
        <el-table-column
          label="间接上级"
          align="center"
          prop="second_parent_nickname"
        ></el-table-column>
        <el-table-column label="间接上级" align="center">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.second_parent_heard_img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="二级返现"
          align="center"
          prop="second_parent_amount"
        ></el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="openDetails(scope.row.order_id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="订单详情"
      :close-on-click-modal="false"
      :visible.sync="detailsDialog"
      width="650px"
      center
      top="10vh"
      :modal-append-to-body="false"
    >
      <div class="detailsDialog">
        <div class="head">
          <div class="head-img">
            <el-avatar :size="50" :src="rowItem.heard_img"></el-avatar>
            <span>{{ rowItem.nickname }}</span>
          </div>
          <div class="head-right">
            <div class="right-price">
              <em>{{ rowItem.order_amount }}</em>
              <p>支付金额</p>
            </div>
            <div class="right-state">
              <em>{{ rowItem.pay_status_name }}</em>
              <p>{{ rowItem.pay_time }}</p>
            </div>
          </div>
        </div>
        <div class="rank">
          <div class="left2">
            <p>
              ID:{{ rowItem.first_parent_id ? rowItem.first_parent_id : "-" }}
            </p>
            <em
              >直接上级：{{
                rowItem.first_parent_nickname
                  ? rowItem.first_parent_nickname
                  : "-"
              }}</em
            >
          </div>
          <div class="right2">
            <p>
              ID:{{ rowItem.second_parent_id ? rowItem.second_parent_id : "-" }}
            </p>
            <em
              >间接上级：{{
                rowItem.second_parent_nickname
                  ? rowItem.second_parent_nickname
                  : "-"
              }}</em
            >
          </div>
        </div>
        <div class="order">
          <em>订单编号：</em>
          <span>{{ rowItem.order_sn }}</span>
        </div>
        <div class="form">
          <el-form
            :model="rowItem"
            :rules="rowItemRules"
            ref="rowItem"
            label-width="80px"
          >
            <el-form-item label="申请人:" prop="accept_name">
              <el-input
                v-model="rowItem.accept_name"
                :disabled="is_edit"
                placeholder="请输入申请人"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
              <el-input
                v-model="rowItem.phone"
                maxlength="11"
                :disabled="is_edit"
                placeholder="请输入手机号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="邮箱:"
              prop="email"
              v-if="rowItem.is_fight == 1"
            >
              <el-input
                v-model="rowItem.email"
                :disabled="is_edit"
                placeholder="请输入邮箱"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="公司:" prop="company">
              <el-input
                v-model="rowItem.company"
                :disabled="is_edit"
                placeholder="请输入公司"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="城市:" prop="city">
              <el-input
                v-model="rowItem.city"
                :disabled="is_edit"
                placeholder="请输入城市"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsDialog = false">取 消</el-button>
        <el-button type="primary" @click="onEdit" v-if="is_edit"
          >编辑</el-button
        >
        <el-button type="primary" @click="addSubmit('rowItem')" v-if="!is_edit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import DataPanel from "@/components/activity-data-panel";
export default {
  components: {
    ImgPopover,
    DataPanel,
  },
  data() {
    return {
      is_sign: 0,
      admin_type: localStorage.getItem("admin_type"),
      pay_status: "",
      payOptions: [
        {
          value: "",
          label: "全部状态",
        },
        {
          value: 0,
          label: "未付款",
        },
        {
          value: 1,
          label: "已付款",
        },
      ],
      order_status: "",
      statusOptions: [
        {
          value: "",
          label: "全部状态",
        },
        {
          value: 0,
          label: "未核销",
        },
        {
          value: 1,
          label: "已核销",
        },
      ],
      selectModel: {
        time: "", // 时间
      },
      activityList: [],
      activity_id: "",
      optionList: [
        {
          value: 0,
          label: "用户昵称",
        },
        {
          value: 1,
          label: "直接上级编号",
        },
        {
          value: 2,
          label: "间接上级编号",
        },
        {
          value: 3,
          label: "核销人员编号",
        },
      ],
      searchContent: "",
      classSelect: "",
      fissionList: [],
      total: 0,
      page: 0,
      dataListy: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      detailsDialog: false,
      rowItem: {},
      is_edit: true,
      rowItemRules: {
        accept_name: [
          {
            required: true,
            message: "请输入申请名",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
          },
        ],
      },
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        activity_id: this.activity_id,
        pay_status: this.pay_status == 3 ? "" : this.pay_status,
        order_status: this.order_status == 3 ? "" : this.order_status,
      };

      this.activityList.forEach((item) => {
        if (this.activity_id == item.activity_id) {
          this.is_sign = item.is_sign;
        }
      });

      if (this.admin_type != 1)
        data.store_id = localStorage.getItem("store_id");

      if (this.classSelect == 0 && this.searchContent != "") {
        data.nickname = this.searchContent;
      } else if (this.classSelect == 1 && this.searchContent != "") {
        data.first_parent_id = this.searchContent;
      } else if (this.classSelect == 2 && this.searchContent != "") {
        data.second_parent_id = this.searchContent;
      } else if (this.classSelect == 3 && this.searchContent != "") {
        data.verification_user_id = this.searchContent;
      }

      // 选择了时间
      if (this.selectModel.time != "" && this.selectModel.time != null) {
        data.start_time = this.selectModel.time[0];
        data.end_time = this.selectModel.time[1];
      }

      this.$http(this.$ApiList.ActivityOrderList, data).then((res) => {
        this.fissionList = res.datas.data;
        this.total = res.datas.count;

        this.dataListy = [];
        this.dataListy.push({
          tips: "当前活动总收款笔数",
          explain: "收款笔数",
          num: res.datas.order_num,
          unit: "笔",
        });
        this.dataListy.push({
          tips: "当前活动总收款金额",
          explain: "收款总额",
          num: res.datas.order_account,
          unit: "元",
        });
        this.dataListy.push({
          tips: "当前活动一二级返现总金额",
          explain: "返现金额",
          num: res.datas.recurrence_price,
          unit: "元",
        });
        this.dataListy.push({
          tips: "当前活动扣除手续费和返现之后的实收金额",
          explain: "实收金额",
          num: res.datas.surplus_price,
          unit: "元",
        });
      });
    },
    // 搜素
    goSearch(type, value) {
      this.searchContent = value;
      this.classSelect = type;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.searchContent = "";
      this.pay_status = 3;
      this.order_status = 3;
      this.selectModel.time = "";
      this.init();
    },
    getActivity() {
      let data = {
        page: 0,
        limit: 100,
      };
      if (this.admin_type != 1)
        data.store_id = localStorage.getItem("store_id");
      this.$http(this.$ApiList.ActivityList, data).then((res) => {
        this.activityList = res.datas.data;
        this.activity_id = res.datas.data[0].activity_id;
        this.is_sign = res.datas.data[0].is_sign;
        this.init();
      });
    },
    selectTime() {
      this.init();
    },
    openDetails(order_id) {
      this.detailsDialog = true;
      this.is_edit = true;
      this.$http(this.$ApiList.ActivityOrderInfo, { order_id }).then((res) => {
        this.rowItem = res.datas;
      });
    },
    // 编辑
    onEdit() {
      this.is_edit = false;
    },
    // 提交
    addSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            order_id: this.rowItem.order_id,
            accept_name: this.rowItem.accept_name,
            mobile_phone: this.rowItem.phone,
            city: this.rowItem.city,
            company: this.rowItem.company,
            email: this.rowItem.email,
          };
          this.$http(this.$ApiList.OrderUpAddress, data).then((res) => {
            this.$layer.msg(res.datas);
            this.detailsDialog = false;
            this.init(this.page);
          });
        } else {
          this.$layer.msg("请填写完整信息后提交");
        }
      });
    },
    // 导出
    onDerive() {
      let url = `${this.$domain}furniture/Adminexcel/ActivityOrderListGetData?activity_id=${
        this.activity_id
      }&secret=888&key=${localStorage.getItem("token")}`;
      if (typeof this.pay_status === "number" && !isNaN(this.pay_status)) {
        url += `&pay_status=${this.pay_status}`;
      }
      if (typeof this.order_status === "number" && !isNaN(this.order_status)) {
        url += `&order_status=${this.order_status}`;
      }
      if (this.selectModel.time != "" && this.selectModel.time != null) {
        url += `&start_time=${this.selectModel.time[0]}&end_time=${this.selectModel.time[1]}`;
      }
      window.location.href = url;
    },
  },
  created() {
    this.getActivity();
  },
};
</script>
<style lang="scss">
.fission-user {
  .box-card {
    margin-bottom: 20px;

    .el-card__body {
      padding: 10px 20px;

      .el-breadcrumb {
        margin-bottom: 0;
      }
    }

    .box-card-view {
      display: flex;

      .active-select {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .el-select {
          width: 400px;
        }
      }
    }
  }

  .fission-user-menu {
    display: flex;
  }

  .fission-user-menu .add {
    margin-left: 10px;
  }

  .fission-user-menu-left {
    flex: 1;
    display: flex;
  }

  .fission-user-menu-right {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
  }

  .fission-user-menu .search-view {
    margin-right: 10px;
  }

  .fission-order-menu {
    margin-top: 20px;

    .fission-order-select {
      color: #333;
    }
  }
  .cell {
    text-overflow: clip !important;
  }
  .detailsDialog {
    .head {
      display: flex;
      align-items: center;
      height: 86px;
      border-radius: 5px;
      background-color: #fdefeb;
      padding: 0 10px;
      .head-img {
        flex: 1;
        display: flex;
        span {
          margin-left: 10px;
          font-weight: 700;
          line-height: 50px;
        }
      }
      .head-right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .right-price {
          em {
            color: #fb6638;
            font-size: 15px;
            line-height: 25px;
          }
          p {
            font-size: 12px;
            color: #909399;
          }
        }
        .right-state {
          em {
            color: #909399;
            font-size: 15px;
            line-height: 25px;
          }
          p {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
    .rank {
      display: flex;
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 10px;
      .left2 {
        flex: 1;
        border-right: 1px solid #eee;
        p {
          font-weight: 700;
          font-size: 15px;
        }
        em {
          color: #909399;
        }
      }
      .right2 {
        flex: 1;
        margin-left: 20px;
        p {
          font-weight: 700;
          font-size: 15px;
        }
        em {
          color: #909399;
        }
      }
    }
    .order {
      border-right: 10px;
      border: 1px solid #eee;
      margin-top: 20px;
      padding: 10px;
      border-radius: 10px;
      height: 60px;
      line-height: 46px;
      em {
        color: #909399;
      }
    }
    .form {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 10px;
      form {
        width: 500px;
      }
    }
  }
}
</style>
